import * as zrender from "zrender";

import {
  showArrow,
  arrowSize,
} from "../../config";

import { findReact, findText } from "../../utils";
/**
 * 创建左箭头矩形
 * @param x 
 * @param y 
 * @param task 任务
 * @param taskBarRect 任务栏矩形
 * @param displayArrow 是否显示箭头
 * @param boundingLeft 左边界
 * @param onClickHandler 点击事件处理函数
 * @returns 
 */
export function createLeftArrowRect(
  _x: number,
  y: number,
  task: Task,
  taskBarRect: any,
  displayArrow: boolean,
  boundingLeft: number,
  onClickHandler: () => void
) {
  if (!showArrow) return
  const baseZ = 1000
  const group = new zrender.Group({
    x: 0 + 5,
    y: y + (taskBarRect.height - arrowSize) / 2,
  })
  const text = new zrender.Text({
    x: arrowSize / 2,
    style: {
      text: '←',
      fill: 'rgb(101, 116, 114)',
      fontSize: arrowSize * 0.8,
      align: "center",
      lineHeight: arrowSize
    },
    z: baseZ + 1,
    name: 'leftArrowText'
  })
  group.add(text)
  const leftArrowRect = new zrender.Rect({
    shape: {
      width: arrowSize,
      height: arrowSize,
      r: 3
    },
    style: {
      fill: 'rgba(221, 221, 221, 1)'
    },
    z: baseZ,
    name: 'leftArrowRect'
  })
  group.on('mouseover', function () {
    if (boundingLeft >= task.start + task.duration) {
      const rect = findReact(group, 'leftArrowRect')
      rect && rect.attr({
        style: {
          fill: task.fillColor
        }
      })
    }
    const text = findText(group, 'leftArrowText')
    text && text.attr({
      style: {
        fill: 'rgb(32, 35, 40)'
      }
    })
  })
  group.on('mouseout', function () {
    const rect = findReact(group, 'leftArrowRect')
    rect && rect.attr({
      style: {
        fill: 'rgba(221, 221, 221, 1)'
      }
    })
    const text = findText(group, 'leftArrowText')
    text && text.attr({
      style: {
        fill: 'rgb(101, 116, 114)',
      }
    })
  })
  group.on('click', onClickHandler)
  group.add(leftArrowRect)
  if (!displayArrow) {
    group.eachChild(function (child) {
      child.hide();
    });
  }
  return group
}

/**
 * 创建右箭头矩形
 * @param x 
 * @param y 
 * @param task 任务
 * @param taskBarRect 任务栏矩形
 * @param displayArrow 是否显示箭头
 * @param boundingLeft 左边界
 * @param onClickHandler 点击事件处理函数
 * @returns 
 */
export function createRightArrowRect(
  x: number,
  y: number,
  task: Task,
  unitWidth: number,
  lastScrollX: number,
  canvasWidth: number,
  taskBarRect: any,
  displayArrow: boolean,
  boundingRight: number,
  onClickHandler: () => void
) {
  if (!showArrow) return
  const baseZ = 1000
  const group = new zrender.Group({
    x: x + lastScrollX + canvasWidth - arrowSize - 10 - task.start * unitWidth,
    y: y + (taskBarRect.height - arrowSize) / 2,
  })
  const text = new zrender.Text({
    x: arrowSize / 2,
    style: {
      text: '→',
      fill: 'rgb(101, 116, 114)',
      fontSize: arrowSize * 0.8,
      align: "center",
      lineHeight: arrowSize
    },
    z: baseZ + 1,
    name: 'rightArrowText'
  })
  group.add(text)

  const rightArrowRect = new zrender.Rect({
    shape: {
      width: arrowSize,
      height: arrowSize,
      r: 3
    },
    style: {
      fill: 'rgba(221, 221, 221, 1)'
    },
    z: baseZ,
    name: 'rightArrowRect'
  })

  // 鼠标移入
  group.on('mouseover', function () {
    const rect = findReact(group, 'rightArrowRect')
    if (boundingRight < task.start) {
      rect && rect.attr({
        style: {
          fill: task.fillColor
        }
      })
    }
    const text = findText(group, 'rightArrowText')
    text && text.attr({
      style: {
        fill: 'rgb(32, 35, 40)'
      }
    })
  })

  // 鼠标移出
  group.on('mouseout', function () {
    const rect = findReact(group, 'rightArrowRect')
    rect && rect.attr({
      style: {
        fill: 'rgba(221, 221, 221, 1)'
      }
    })
    const text = findText(group, 'rightArrowText')
    text && text.attr({
      style: {
        fill: 'rgb(101, 116, 114)',
      }
    })
  })

  group.on('click', onClickHandler)
  group.add(rightArrowRect)
  if (!displayArrow) {
    group.eachChild(function (child) {
      child.hide();
    });
  }
  return group
}